<template>
   <el-row class="ClientBox">
     <el-row class="ClientBg">
       <el-row class="ClientContent">
         <h3 class="ClientTitle">客户列表 <span class="icon">></span></h3>
         <el-row>
           <el-col :span="5"  class="keyWordsContent">
             <el-input v-model="keyWordLike" size="small" placeholder="搜索关键字" id="keyWords" @click="changeType()"></el-input>
             <span class="el-icon-search searchIcon" @click="changeType"></span>
           </el-col>
           <el-col :span="5" :offset="13">
             <el-button type="primary" size="small">导入客户</el-button>
             <el-button type="primary" size="small">新增客户</el-button>
           </el-col>
         </el-row>
         <el-row class="siftingBox">
           <span class="sifting">筛选：</span>
           <el-button round size="small" mini class="activeSifting text" type="text" @click="changeType(1)" :class=" type==1 ? 'active' : ''">全部</el-button>
           <el-button round size="small" mini type="text" class="text" @click="changeType(2)"  :class=" type==2 ? 'active' : ''">未签单</el-button>
           <el-button round size="small" mini type="text"  class="text" @click="changeType(3)"  :class=" type==3 ? 'active' : ''">已签单</el-button>
         </el-row>
         <el-row>
           <el-table :data="clientTableData.list" border style="width: 100%" v-loading="loading">
             <el-table-column prop="erpProjectId" label="序号" width="80"></el-table-column>
             <el-table-column prop="customerName" label="客户" width="120"></el-table-column>
             <el-table-column prop="customerPhoneNumber" label="联系电话" width="120"></el-table-column>
             <el-table-column prop="layoutName" label="居室户型" width="120"></el-table-column>
             <el-table-column  label="建筑面积" width="120" >
               <template slot-scope="scope">
                 <span style="margin-left: 10px">{{scope.row.area | fix2}}㎡</span>
               </template>
             </el-table-column>
             <el-table-column prop="residentialQuartersName" label="工程地点" width="120"></el-table-column>
             <el-table-column prop="projectSetList" label="工程等级" width="120">
               <template slot-scope="scope">
                 <span style="margin-left: 10px">{{getProjectSetList(scope.row)}}</span>
               </template>
             </el-table-column>
             <el-table-column prop="entryTime" label="创建时间" width="120">
               <template slot-scope="scope">
                 <span style="margin-left: 10px">{{scope.row.entryTime | format }}</span>
               </template>
             </el-table-column>
             <el-table-column label="签单状态" width="120">
               <template slot-scope="scope">
                 <span style="margin-left: 10px">{{scope.row.hasSigned | hasSignedformat }}</span>
               </template>
             </el-table-column>
             <el-table-column fixed="right" label="操作" width="200">
               <template slot-scope="scope">
                 <el-button type="text" size="small" @click="dialogVisible = true">编辑用户</el-button>
                 <router-link to="/main/editContract" class="text"><el-button type="text" size="small">编辑合同</el-button></router-link>
                 <el-button type="text" size="small">删除</el-button>
               </template>
             </el-table-column>
           </el-table>
           <el-pagination
             @current-change="handleCurrentChange"
             :current-page="pageIndex"
             layout="total, sizes, prev, pager, next, jumper"
             :total="parseInt(clientTableData.count)">
           </el-pagination>
         </el-row>
       </el-row>
     </el-row>
     <!--编辑用户弹窗-->
     <el-dialog title="编辑用户" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
       <el-form ref="form" :model="EditUserInfoForm" label-width="110px">
         <el-row>
           <el-col :span="12">
             <el-form-item label="客户姓名：">
               <el-input v-model="EditUserInfoForm.userName" size="small"></el-input >
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="联系电话：">
               <el-input v-model="EditUserInfoForm.userName" size="small"></el-input >
             </el-form-item>
           </el-col>
         </el-row>
         <el-form-item label="小区名称：">
           <el-input v-model="EditUserInfoForm.userName" size="small"></el-input >
         </el-form-item>
         <el-row>
           <el-col :span="12">
             <el-form-item label="" labelWidth="0">
               <el-col :span="10" :offset="9">
                 <el-input v-model="EditUserInfoForm.userName" size="small"></el-input >
               </el-col>
               <el-col :span="2" :offset="1">
                 栋
               </el-col>
             </el-form-item>
           </el-col>
           <el-col :span="6">
             <el-form-item label=""  labelWidth="0">
               <el-col :span="15">
                 <el-input v-model="EditUserInfoForm.userName" size="small"></el-input >
               </el-col>
               <el-col :span="5" :offset="1">
                 单元
               </el-col>
             </el-form-item>
           </el-col>
           <el-col :span="6">
             <el-form-item label=""  labelWidth="0">
               <el-col :span="20">
                 <el-input v-model="EditUserInfoForm.userName" size="small"></el-input >
               </el-col>
               <el-col :span="2" :offset="1">
                 室
               </el-col>
             </el-form-item>
           </el-col>
         </el-row>
         <el-form-item label="户型：">
            <el-col :span="11"><el-input v-model="EditUserInfoForm.userName" size="small"></el-input ></el-col>
            <el-col :span="2" style="text-align: center"> - </el-col>
            <el-col :span="11"><el-input v-model="EditUserInfoForm.userName" size="small"></el-input ></el-col>
         </el-form-item>
         <el-row>
           <el-col :span="12">
             <el-form-item label="工程等级：">
               <el-input v-model="EditUserInfoForm.userName" size="small"></el-input >
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="面积：">
               <el-input v-model="EditUserInfoForm.userName" size="small"></el-input >
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="12">
             <el-form-item label="设计师：">
               <el-input v-model="EditUserInfoForm.userName" size="small"></el-input >
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="预算员：">
               <el-input v-model="EditUserInfoForm.userName" size="small"></el-input >
             </el-form-item>
           </el-col>
         </el-row>
       </el-form>
       <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false" size="small">取 消</el-button>
            <el-button type="primary"  size="small">保 存</el-button>
        </span>
     </el-dialog>
   </el-row>
</template>
<script>
    import ElCol from "element-ui/packages/col/src/col";
    import  axios from  'axios';
    export default {
      components: {ElCol},
      data() {
          return {
            type:1,
            keyWordLike:'',
            hasSigned:'',
            clientTableData:[],
            EditUserInfoForm:{
              userName:''
            },
            dialogVisible: false,
            //分页
            pageIndex:1,
            loading:false
          }
        },
      methods:{
          changeType(index){
            var that=this
            that.type=index
            if(index==1){
              that.hasSigned=''
            }else if(index==2){
              that.hasSigned=false
            }else{
              that.hasSigned=true
            }

            that.loading=true
            var url="/api/erp/erpproject?keyWordLike="+that.keyWordLike+"&hasSigned="+that.hasSigned+"&pageId="+that.pageIndex
            // 开始请求
            axios.get(url,{
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'token':sessionStorage.getItem("token")
              }
            }).then(function ({data}) {
              that.loading=false
              if(data.status){

                that.clientTableData=data.data
              }else{
                that.$message.error(data.message);
              }
            })
          },
        //"X关闭弹窗"
        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => {});
        },
        //分页
        handleCurrentChange(val) {
          this.pageIndex = val;
          this.changeType(index)
        },
        getProjectSetList(row){
            for(var i=0; i<row.projectSetList.length;i++){
              var item=row.projectSetList[i]
              for(var k=0; k<item.subitemList.length;k++){
                return item.subitemList[k].classifyId
              }
            }
        },
      },
      filters:{
        fix2 : function (value) {
          return parseFloat(value).toFixed(2)
        },
        format : function (timestamp) {
          var time = new Date(timestamp);
          var year=time.getYear();
          var month=time.getMonth()+1;
          var date=time.getDate();
          var hour=time.getHours();
          var minute=time.getMinutes();
          var second=time.getSeconds();
          return "20"+year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
        },
        hasSignedformat(hasSigned){
          return hasSigned==true ? "已签单" : "未签单"
        }
      },
      mounted(){
        this.changeType(1)
      },


    }

</script>

<style scoped>
  .ClientBox{
    padding: 100px 20px 10px 250px;
  }
  .ClientBg{
    background-color: white;
    box-shadow: 0 0 6px #e7e7e7;
  }
  .ClientContent{
    padding: 20px;
  }
  .ClientTitle{
      font-size: 12px;
      color: #ffa44c;
  }
  .icon{
    color: #777;
    margin-left: 5px;
    font-size: 15px;
  }
  #keyWords{
    border-radius: 20px;
  }
  .keyWordsContent{
    position: relative;
  }
  .searchIcon{
    position: absolute;
    right: 20px;
    top:6px;
    font-size: 20px;
    color: gray;
  }
 .sifting{
   font-size: 14px;
   color: #777;
 }
  .siftingBox{
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .siftingBox>button{
    border: none;
  }
  .active {
    border: 1px solid #ffa44c !important;
    color: #ffa44c !important;
    line-height: 5px;
  }
  .text{
    color: #777;
  }

</style>
